import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Table, Button, Tabs } from 'antd'
import { getList } from '../../api'
import { statusEnum } from '../../enum'
import axios from 'axios';
const { TabPane } = Tabs;

const Order = () => {

    const navigate = useNavigate()

    const tabs = ["全部",
        "待处理",
        "拣货中",
        "取消待审",
        "已发货",
        "已完成",
        "已关闭",
        "测试空"
    ]

    const [dataSource, setDataSource] = useState([])

    const [num, setNum] = useState('0')

    // 选中项
    const [selectKeys, setselectKeys] = useState([])

    useEffect(() => {
        getTableList()
    }, [num])

    const getTableList = () => {
        getList({ status: num }).then(res => {
            setDataSource(res.data)
        })
    }

    // 跳转详情
    const toDetail = (id: string) => {
        navigate(`/detail/${id}`)
    }

    const columns = [
        {
            dataIndex: 'img',
            key: 'img',
            render: (src: string) => {
                return <img src={src} alt="" />
            }
        },
        {
            title: '商品名称',
            dataIndex: 'title',
            key: "title"
        },
        {
            title: '订单总额',
            dataIndex: 'price',
            key: 'price'
        },
        {
            title: '交易状态',
            dataIndex: 'status',
            key: "status",
            render: (status: number) => {
                return <div>
                    {
                        statusEnum[status]
                    }
                </div>
            }
        },
        {
            title: '收货人',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: "操作",
            dataIndex: 'id',
            key: "id",
            render: (id: string) => {
                return <Button onClick={() => toDetail(id)}>详情</Button>
            }
        }

    ];

    const callback = (val: string) => {
        setNum(val)
    }

    // 多选函数
    const onSelectChange = (selectedRowKeys: any) => {
        console.log(selectedRowKeys)
        setselectKeys(selectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys: selectKeys, // 被选中的数据的id  是一个数组
        onChange: onSelectChange, // 点击多选按钮时触发的事件
    }

    const batch = () => {
        if (selectKeys.length) {
            alert('发货成功')
        }
    }

    return <div>
        <Button onClick={() => batch()}>批量发货{selectKeys.length}件</Button>
        <Tabs defaultActiveKey={num} onChange={callback}>
            {
                tabs.map((item, idx) => <TabPane tab={item} key={idx} />)
            }
        </Tabs>
        {
            <Table
                rowKey="id"
                rowSelection={rowSelection}
                dataSource={dataSource}
                columns={columns} />
        }

    </div>
}

export default Order